<template>
  <el-row :gutter="20">
    <el-col v-for="(item,index) in prodList" :span="6">
      <el-card style="max-width: 480px">
        <template #header>
          <div class="card-header">
            <span class="title">{{ item.name }}</span>
          </div>
        </template>
        <el-image :src="'https://omsv2-static.fnji.com/'+item.picLeft" lazy />
        <template #footer>
          <el-tag type="primary">{{item.fnjiType==1?'家具':'家居'}}</el-tag>
          <el-tag type="success">{{item.category}}</el-tag>
        </template>
      </el-card>
    </el-col>
    
  </el-row>
</template>

<script setup>

import { ref } from 'vue';
import { productGet } from '../../api/product';
const prodList = ref([])
let res = await productGet()
console.log(res); //输出并观察自己的接口数据包格式
prodList.value = res.data.results
</script>

<style lang="scss" scoped>
.title{
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.el-col{
  margin-bottom: 20px;
}
</style>
